<template>
  <div class="article-item-content">
    <router-link :to="{ path: '/articleDetail', query: { articleId: 1 } }">
      <p class="article-item-content-title ellipsis2">
        Spring Boot 2.4.0 正式发布！全新的配置处理机制，拥抱云原生！
      </p>
    </router-link>
    <p class="article-item-content-other">
      <i class="el-icon-third-date" />
      <time>2020-11-21</time>
      <el-divider direction="vertical" />
      <i class="el-icon-third-guidang" />
      <router-link to="#">
        <span>Java</span>
      </router-link>
    </p>
    <p class="article-item-content-content ellipsis3">
      2020年11月12日，Spring官方发布了Spring Boot 2.4.0 GA的公告。
      2020年11月12日，Spring官方发布了Spring Boot 2.4.0 GA的公告。
      2020年11月12日，Spring官方发布了Spring Boot 2.4.0 GA的公告。
      2020年11月12日，Spring官方发布了Spring Boot 2.4.0 GA的公告。
      2020年11月12日，Spring官方发布了Spring Boot 2.4.0 GA的公告。
    </p>
  </div>
</template>

<script>
export default {
  name: "ArticleItemContent",
  data() {
    return {};
  },
};
</script>

<style lang="stylus" scoped>
.article-item-content {
  width: 60%;
  padding: 0 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-item-content>a:hover, .article-item-content-other>a:hover {
  color: var(--colorLevel1);
}

.article-item-content-title {
  font-size: 0.24rem;
  line-height: 0.35rem;
}

.article-item-content-other {
  padding: 0.1rem 0;
}

.article-item-content-other, .article-item-content-other i[class*='el-icon-third-'], .article-item-content-other>a {
  color: #858585;
  font-size: 0.12rem;
}

.article-item-content-other i[class*='el-icon-third-'] {
  margin-right: 0.05rem;
}

.article-item-content-content {
  color: #4c4948;
  font-size: 0.14rem;
}
</style>